<template>
  <view class="sprint">
    <uni-nav-bar title="考 前 冲 刺" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
    <!-- <view class="subject u-f u-f-ac">
      <text class="fontsize24">学科:</text> -->
      <radio-components :value="subjectIndex" :range="subjects" rangekey="disciplineTitle" @update:value="PickerChange"></radio-components>
    <!-- </view> -->
    <scroll-view @scrolltolower="nextLoading" scroll-y class="heightAuto" v-if="list.length>0">
      <view class="list">
        <view class="list-item positionRe" v-for="(item,index) in list" :key="index" @click="$toPage(`./play?title=${item.videoTitle}&videoUrl=${item.videoUrl}&fileUrl=${item.coursewareUrl}`)">
          <image :src="item.disciplineImage" mode="aspectFill"></image>
          <view class="color64 txtAbsolute">
            {{item.videoTitle}}
          </view>
        </view>
        <load-more :loadtext="loadtext"></load-more>

      </view>
    </scroll-view>
    <view class="positionRe heightAuto" v-else>
      <no-thing></no-thing>
    </view>
  </view>
</template>

<script>
  import loadMore from "@/components/load-more.vue";
  import noThing from "@/components/comm/no-thing.vue"
    import radioComponents from '@/components/radio-components.vue'
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    computed: { ...mapState(['userInfo', 'subjectList','isConnected'])
    },
    components: {
      loadMore,
      noThing,
      'radio-components': radioComponents
    },
    data() {
      return {
        subjects: [{
          disciplineTitle: '',
          id: ''
        }],
        subjectIndex: 0,
        size: 6,
        page: 1,
        total: 0,
        isLoading: false,
        loadtext: '加载更多',
        list: []
      };
    },
    async onLoad() {
      // if(this.isConnected){
      //   await this.setSubjectListAsync()
      // }
      this.subjects = this.subjectList
      this.getVideoList()
    },
    methods: {
      ...mapActions(['setSubjectListAsync']),
      PickerChange(e) {
        if (this.subjectIndex != e) {
          this.subjectIndex = e
          this.getVideoList()
        }
      },
      // 获取考前冲刺列表
      getVideoList() {
        this.isLoading = true
        this.loadtext = '加载中...';
        let disciplineId = this.subjects[this.subjectIndex].id
        this.$http.get('/special/list', {
          params: {
            disciplineId: disciplineId,
            type: 1,
            size: this.size,
            page: this.page
          }
        }).then(res => {
          this.isLoading = false
          this.total = res.data.total

          if (this.page === 1) {
            this.list = res.data.data
          } else {
            this.list = [...this.list, ...res.data.data]
          }

          if (this.page * this.size < this.total) {
            this.loadtext = '加载更多';
          } else {
            this.loadtext = '';
          }
        })
      },
      // 触底加载
      nextLoading() {
        if (this.isLoading) {
          return;
        }
        if (this.page * this.size < this.total) {
          ++this.page;
          this.getSpecialSubject()
        }
      },
    }
  }
</script>

<style lang="scss">
  .sprint {
    min-height: 100%;
    background-color: $bg_color;

    .heightAuto {
      height: calc(100vh - var(--status-bar-height) - 16vh);
    }

    .list {
      margin: 0px 0px 0px px2vw(32);
      &-item {
        @include list-item;
        padding: 0px;
        margin-bottom: px2vh(64);
        width: px2vw(452);
        background-color: transparent;
        image{
          width: px2vw(452);
          height: px2vw(215);
        }
        .txtAbsolute{
          position: absolute;
          bottom: px2vh(-30);
          left: 50%;
          transform: translateX(-50%);
          width: 90%;
          height: px2vh(72);
          line-height: px2vh(72);
          background-color: #FFFFFF;
          border-radius: 8px;
          border-bottom: 2px solid $global-color;
          text-align: center;
        }
      }
    }
  }
</style>
